import React, { useState } from 'react'

export default function App() {
  // c 是 一个常量,接收了状态数据1
  // setC是一个常量,接收了修改这个状态的方法
  const [c, setC] = useState(1)
  // 注意: useState调用一次,就生成一个状态数据.所以有多个状态,就应该多次使用useState
  const [msg, setMsg] = useState('hello hook')

  // 关于useState的注意点:
  // 1. useState内部已经帮我们实现了性能优化.如果状态值没有变化,则不会让组件频繁更新
  // 2. useState中修改状态的方法(setXXX)这个函数也是异步的
  // 3. useState中修改状态的方法(setXXX)的第一种写法是直接传入目标值.第二种写法是传入一个函数
  return (
    <div>
      <p>{msg}</p>
      <p>{c}</p>
      <button
        onClick={() => {
          // setC(目标值)
          setC(c + 1)
          // console.log(c)
          setC((newC) => {
            return newC + 1
          })
        }}
      >
        +
      </button>
    </div>
  )
}

// import React, { Component } from 'react'

// export default class App extends Component {
//   state = { c: 1 }
//   render() {
//     console.log('app的render执行了')
//     return (
//       <div>
//         App,{this.state.c},{' '}
//         <button
//           onClick={() => {
//             this.setState({
//               c: 2,
//             })
//           }}
//         >
//           +
//         </button>
//       </div>
//     )
//   }
// }
